<!--
 * @Author: DT1604\ZPL zhoupeili@dpc.com.cn
 * @Date: 2022-05-25 11:14:46
 * @LastEditors: DT1604\ZPL zhoupeili@dpc.com.cn
 * @LastEditTime: 2022-06-22 18:12:55
 * @FilePath: \energy-om-platform\src\views\cabint\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <!-- 搜索条件 -->
    <el-form :inline="true" :model="searchForm" class="search-form">
      <div>
        <el-form-item label="文件名">
          <el-input
            style="width: 260px"
            v-model="searchForm.filename"
            placeholder="请输入文件名"
          ></el-input>
        </el-form-item>
        <el-form-item label="版本号">
          <el-input
            style="width: 260px"
            v-model="searchForm.version"
            placeholder="请输入版本号"
          ></el-input>
        </el-form-item>
      </div>
      <el-form-item>
        <el-button type="primary" size="medium" @click="doSearch"
          >查询</el-button
        >
        <el-button size="medium" @click="clearSearch">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="titles">
      <h3>软件版本</h3>
      <div class="btn_right">
        <el-button type="primary" size="medium" @click="addDialog"
          >新增</el-button
        >
      </div>
    </div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      v-loading="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      @selection-change="handleSelectionChange" :cell-style="centerStyle"
      :header-cell-style="centerStyle"
    >
      <el-table-column type="selection"> </el-table-column>
      <el-table-column label="文件名称" prop="filename">
        <!-- <template slot-scope="scope">{{ scope.row.date }}</template> -->
      </el-table-column>
      <!-- <el-table-column prop="fileUrl" label="文件目录" show-overflow-tooltip>
      </el-table-column> -->
      <el-table-column prop="md5" label="MD5校验"> </el-table-column>
      <el-table-column prop="equipmentType" label="类型" :formatter="formatter" width="110px">
      </el-table-column>
      <el-table-column prop="version" label="版本号"> </el-table-column>
      <el-table-column prop="createTime" label="创建时间"> </el-table-column>
      
      <el-table-column label="状态" width="100px">
        <template slot-scope="scope">
          <span :class="['enable', { dienable: scope.row.isEnable == 0 }]">{{
            statusData[scope.row.isEnable]
          }}</span>
        </template>
      </el-table-column>

      <el-table-column fixed="right" label="操作" width="160px">
        <template slot-scope="scope">
          <el-button
            @click.native.prevent="handleRow(scope.row, 1)"
            type="text"
          >
            编辑
          </el-button>
          <el-popconfirm
            title="确定要删除吗？"
            @onConfirm="handleRow(scope.row, 2)"
          >
            <el-button
              slot="reference"
              type="text"
              style="color: #f56c6c; margin-left: 10px"
              >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <Pagination
      :page="page"
      :limit="size"
      :total="total"
      @pagination="pagination"
    />

    <!-- 弹框 -->
    <el-dialog
      :title="diaTitle"
      :visible.sync="updateDialogVisible"
      width="40%" :close-on-click-modal="false"
      center
    >
      <WareVersion
        :updateDialogVisible="updateDialogVisible"
        :equipType="equipType"
        :currentRow="currentRow"
        @closeDialog="closeDialog"
        @resetData="resetData"
      ></WareVersion>
    </el-dialog>
  </div>
</template>

<script>
import WareVersion from "./wareVersion";
import Pagination from "@/components/Pagination";

import { software } from "@/api/cabint";
import { mapGetters } from "vuex";

export default {
  components: {
    WareVersion: WareVersion,
    Pagination: Pagination,
  },
  data() {
    return {
      page: 1,
      size: 10,
      total: 0, //总数据
      searchForm: {
        filename: "", //文件名
        version: "", //版本号
      },
      listLoading: false,
      updateDialogVisible: false, //升级弹框
      diaTitle: "", //弹框title
      tableData: [],
      multipleSelection: [],
      equipType: "EXCHANGE_CABINET", //换电柜
      statusData: {
        1: "启用",
        0: "未启用",
      },
      deleteData: {
        1: "删除",
        0: "未删除",
      },
      currentRow: {}, //当前行
    };
  },
  computed: {
    ...mapGetters(["enums"]),
  },
  async created() {
    this.getList();
    await this.$store.dispatch("enums/enums");
  },
  methods: {
    centerStyle() {
      return "text-align:center";
    },
    getList() {
      this.listLoading = true;
      let params = Object.assign(
        {
          pageNum: this.page,
          pageSize: this.size,
        },
        this.searchForm
      );
      software("/list", "post", params, 1)
        .then((res) => {
          this.tableData = res.data;
          this.total = Number(res.total);
        })
        .finally((complete) => {
          this.listLoading = false;
        });
    },
    formatter(row, column, cellValue, index) {
      const valueMap = new Map([
        ["CHARGING_CABINET", "充电柜"],
        ["EXCHANGE_CABINET", "换电柜"],
      ]);
      return valueMap.get(cellValue);
    },
    // 分页
    pagination(val) {
      this.page = val.page;
      this.size = val.limit;
      this.getList();
    },
    handleRow(row, type) {
      switch (type) {
        case 1:
          this.updateDialogVisible = true;
          this.diaTitle = "编辑";
          this.currentRow = row;
          break;
        case 2:
          this.deleteRow(row);
          break;
      }
    },
    // 删除
    deleteRow(row) {
      this.listLoading = true;
      software(`/delete?id=${row.id}`, "delete")
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: res.message,
              type: "success",
            });
            // 删除成功 更新列表
            this.resetData();
          }
        })
        .finally((complete) => {
          this.listLoading = false;
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 搜索
    doSearch() {
      this.getList();
    },
    // 重置
    clearSearch() {
      this.searchForm = {
        filename: "",
        version: "",
      };
      this.doSearch();
    },
    addDialog() {
      this.updateDialogVisible = true;
      this.currentRow = {};
      this.diaTitle = "新增";
    },
    closeDialog() {
      this.updateDialogVisible = false;
    },
    resetData() {
      this.page = 1;
      this.size = 10;
      this.total = 0;
      this.searchForm = {
        filename: "",
        version: "",
      };
      this.getList();
    },
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/css/scss.scss";

.titles {
  @include flexLayout(center, space-between);
  .btn_right {
    span {
      margin-right: 10px;
      font-size: 14px;
    }
  }
}
.search-form {
  @include flexLayout(center, space-between);
}
.el-form--inline .el-form-item {
  margin-right: 40px;
}
.dialog-footer {
  text-align: right;
}
.enable {
  color: #409eff;
  border: 1px solid #409eff;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.dienable {
  color: #f56c6c;
  border-color: #f56c6c;
}
</style>
